<template>
  <!-- 添加部门对话框组件
        title 对话框的标题
        visible ="布尔值"
        @close是对话框的关闭事件
       -->
  <el-dialog
    :title="title"
    :visible="addDialogVisible"
    @close="closeAddDialog"
  >
    <!--  :model :rules prop v-model -->
    <el-form ref="formRef" label-width="120px" :model="addForm" :rules="rules">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="addForm.name" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="addForm.code" :disabled="isDisAbled" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <!-- <el-select  style="width:80%" placeholder="请选择" /> -->
        <el-select v-model="addForm.manager" style="width:80%" placeholder="请选择">
          <!-- el-option中两个属性  label是展示给用户看的  value是会收集到表单数据中 -->
          <el-option
            v-for="item in simpleList"
            :key="item.id"
            :value="item.username"
            :label="item.username"
          />
        </el-select>

      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="addForm.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeAddDialog">取 消</el-button>
      <el-button type="primary" @click="addDept">确 定</el-button>
    </span>
  </el-dialog>

</template>

<script>
import { reqGetSimpleList } from '@/api/user'
import { reqAddDept, reqGetDeptDetailById, reqUpdateDept } from '@/api/departments'
export default {
  props: {
    addDialogVisible: {
      type: Boolean,
      default: false
    },
    // 基于这个对象中有一个id 添加部门准备
    nodeData: {
      type: Object,
      required: true
    },
    // 源数据
    sourcelist: {
      type: Array,
      required: true
    }
  },
  data() {
    // 自定义校验部门名称规则
    const checkNameRepeat = (rule, value, callback) => {
      // console.log(value)
      // 如果是处理编辑状态,(如果输入框的值和已有的名称重复)不校验部门名称
      if (this.addForm.id && value === this.nodeData.name) {
        return callback()
      }
      // 编辑状态 校验的是自己的兄弟部门
      let arr = []
      if (this.addForm.id) {
        // 编辑 遍历源数据找兄弟部门
        arr = this.sourcelist.filter(item => item.pid === this.nodeData.pid)
      } else {
        // 新增  value和当前部门下所有子部门比较
        arr = this.nodeData.children
      }
      const isRepeat = arr.some(item => item.name === value)
      isRepeat ? callback(new Error(`已经存在${value}部门`)) : callback()
      // console.log(isRepeat)
      // 如果 isRepeat 是true 说明部门名称有重复 false 是不重复
    }
    // 自定义校验部门编码规则  所有部门的code都不允许重复
    // 1. 将部门列表的源数据存储下来 传递给add-dept组件
    // 2. 组件内部遍历比较 和 value比较
    const checkCodeRepeat = (rule, value, callback) => {
      // 如果是处理编辑状态,(如果输入框的值和已有的编码重复)不校验部门编码
      if (this.addForm.id && value === this.nodeData.code) {
        return callback()
      }
      const isRepeat = this.sourcelist.some(item => item.code === value)
      // 如果 isRepeat 是true 说明部门编码有重复 false 是不重复
      isRepeat ? callback(new Error(`部门编码${value}已存在`)) : callback()
    }
    return {
      addForm: {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门负责人
        introduce: '' // 部门介绍
      },
      // 表单校验规则
      rules: {
        name: [
          { required: true, message: '请输入部门名称', trigger: ['blur', 'change'] },
          // 有点问题 部门名称 2-10字符之间
          { min: 2, max: 10, message: '部门名称在2到10个字符', trigger: ['blur', 'change'] },
          // 自定义校验规则
          { validator: checkNameRepeat, trigger: ['blur', 'change'] }
        ],
        code: [
          { required: true, message: '请输入部门编码', trigger: ['blur', 'change'] },
          { min: 1, max: 50, message: '部门编码在1到50个字符', trigger: ['blur', 'change'] },
          // 自定义校验规则
          { validator: checkCodeRepeat, trigger: ['blur', 'change'] }
        ],
        manager: [
          { required: true, message: '请选择部门负责人', trigger: ['blur', 'change'] }
        ],
        introduce: [
          { required: true, message: '请输入部门介绍', trigger: ['blur', 'change'] },
          { min: 1, max: 300, message: '部门介绍在1到300个字符', trigger: ['blur', 'change'] }
        ]
      },
      simpleList: [] // 部门负责人列表
    }
  },
  computed: {
    // 控制对话框标题属性
    title() {
      return this.addForm.id ? '编辑部门' : '新增部门'
    },
    isDisAbled() {
      // return this.addForm.id ? true : false
      return !!this.addForm.id
    }
  },
  created() {
    this.getSimpleList()
  },
  methods: {
    closeAddDialog() {
      // 通知父组件关闭对话框
      this.$emit('update:addDialogVisible', false)
      // 关闭对话框的时候重置表单和表单的校验规则 resetFields()
      // 强制清空编辑后残留的字段,保证addForm最初始的状态
      this.addForm = {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门负责人
        introduce: '' // 部门介绍
      }
      this.$refs.formRef.resetFields() // 重置已存在表单的字段
    },
    // 获取部门负责人列表方法
    async getSimpleList() {
      const { data } = await reqGetSimpleList()
      this.simpleList = data
    },
    // 添加部门
    addDept() {
      // 1. 表单的预校验 validate
      this.$refs.formRef.validate(async boo => {
        if (boo) {
        //  新增和编辑分支处理
          if (this.addForm.id) {
          // 编辑业务
            const { message } = await reqUpdateDept(this.addForm)
            // 3.提示用户
            this.$message.success(message)
          } else {
          // 新增 业务
            // 2. 发送请求
            const { message } = await reqAddDept({ ...this.addForm, pid: this.nodeData.id })
            // 3.提示用户
            this.$message.success(message)
          }
          // 4.关闭对话框
          this.closeAddDialog()
          // 5.通知父组件重新获取部门列表
          this.$emit('reload')
        }
      })
    },
    // 根据id获取部门信息
    async getDetailById(id) {
      const res = await reqGetDeptDetailById(id)
      // console.log(res)
      // 将通过查询部门详情的结果赋值给表单管理的数据 addForm
      this.addForm = res.data
    }
  }
}
</script>

<style>

</style>
